<template>
  <!-- 卡片列表 -->
  <div class="app-container">
    <div class="filter-container">
      <el-form @submit.native.prevent>
        <el-date-picker
          v-model="listQuery.time"
          type="daterange"
          range-separator="至"
          start-placeholder="激活开始日期"
          end-placeholder="激活结束日期"
        />
        <el-input placeholder="业务号码" style="width: 200px" class="filter-item" v-model="listQuery.business_code" />
        <el-input placeholder="iccid" style="width: 200px" class="filter-item" v-model="listQuery.iccid" />
        <el-input placeholder="卡批次" style="width: 200px" class="filter-item" v-model="listQuery.batch" />
        <el-input placeholder="卡片号段" style="width: 200px" class="filter-item" v-model="listQuery.code_zone" />
        <el-select style="width: 200px" v-model="listQuery.agent" placeholder="所属代理商">
          <el-option v-for="(item, index) in allAgent" :key="index" :label="item.name" :value="item.id"></el-option>
        </el-select>
        <el-select style="width: 200px" v-model="listQuery.operator" placeholder="运营商">
          <el-option
            v-for="(item, index) in config.enum.operator"
            :key="index"
            :label="item.value"
            :value="item.id"
          ></el-option>
        </el-select>
        <el-select style="width: 150px" v-model="listQuery.card_status" placeholder="是否激活">
          <el-option
            v-for="(item, index) in [
              { id: -1, value: '全部' },
              { id: 1, value: '已激活' },
              { id: 0, value: '未激活' },
            ]"
            :key="index"
            :label="item.value"
            :value="item.id"
          ></el-option>
        </el-select>
        <el-select style="width: 150px" v-model="listQuery.real_name_auth" placeholder="是否实名">
          <el-option
            v-for="(item, index) in [
              { id: -1, value: '全部' },
              { id: 1, value: '已实名' },
              { id: 0, value: '未实名' },
            ]"
            :key="index"
            :label="item.value"
            :value="item.id"
          ></el-option>
        </el-select>
        <el-button
          v-waves
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          native-type="submit"
          @click="fetchData(1)"
          >查询</el-button
        >
        <el-button
          v-waves
          class="filter-item"
          v-permission="['admin']"
          type="success"
          icon="el-icon-plus"
          @click="$router.push('/card/create')"
          >添加卡片</el-button
        >
      </el-form>
    </div>
    <!-- 表格内容 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="加载中..."
      border
      fit
      highlight-current-row
      @sort-change="sortChange"
    >
      <!-- <el-table-column align="center" type="selection" width="70" /> -->
      <el-table-column align="center" label="ICCID">
        <template slot-scope="scope">
          <el-link type="primary" @click="$router.push(`/card/info/${scope.row.id}`)">{{ scope.row.iccid }}</el-link>
        </template>
      </el-table-column>

      <el-table-column label="业务号码" align="center">
        <template slot-scope="scope">{{ scope.row.business_code }}</template>
      </el-table-column>

      <el-table-column label="划拨状态" align="center">
        <template slot-scope="scope">
          <el-tag :type="config.enum.assign_status.find((e) => e.id === scope.row.assign_status).type">{{
            config.enum.assign_status.find((e) => e.id === scope.row.assign_status).value
          }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="卡片状态" prop="card_status" align="center" sortable="custom">
        <template slot-scope="scope">
          <el-tag :type="config.enum.card_status.find((e) => e.id === scope.row.card_status).type">{{
            config.enum.card_status.find((e) => e.id === scope.row.card_status).value
          }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="实名状态" align="center" prop="real_name_auth" sortable="custom">
        <template slot-scope="scope">
          <el-tag :type="config.enum.real_name_auth.find((e) => e.id === scope.row.real_name_auth).type">{{
            config.enum.real_name_auth.find((e) => e.id === scope.row.real_name_auth).value
          }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="激活时间" align="center" prop="first_active_time" sortable="custom">
        <template slot-scope="scope">{{ scope.row.first_active_time }}</template>
      </el-table-column>

      <el-table-column label="到期时间" align="center">
        <template slot-scope="scope">{{ scope.row.end_time }}</template>
      </el-table-column>

      <el-table-column label="已用流量" width="120" align="center" prop="used_flow_size" sortable="custom">
        <template slot-scope="scope">{{ scope.row.used_flow_size + 'MB' }}</template>
      </el-table-column>

      <el-table-column label="已用语音" width="120" align="center" prop="used_voice" sortable="custom">
        <template slot-scope="scope">{{ scope.row.used_voice + '分钟' }}</template>
      </el-table-column>

      <el-table-column label="卡批次" align="center" prop="batch" sortable="custom">
        <template slot-scope="scope">{{ scope.row.batch }}</template>
      </el-table-column>

      <el-table-column label="归属代理商" align="center">
        <template slot-scope="scope">{{
          (scope.row.agent && $store.getters.allAgent.find((e) => e.id === scope.row.agent).name) || '-'
        }}</template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.size"
      @pagination="fetchData"
    />
  </div>
</template>

<script>
import waves from '@/directive/waves'; // waves directive
import Pagination from '@/components/Pagination'; // secondary package based on el-pagination
import { getCardList } from '@/api/card';
import permission from '@/directive/permission/index.js';
import dayjs from 'dayjs';
import { mapGetters } from 'vuex';

export default {
  directives: {
    waves,
    permission,
  },
  components: {
    Pagination,
  },
  data() {
    return {
      list: null,
      listLoading: true,
      total: 0,
      listQuery: {
        page: 1, // 当前页码
        size: 50, // 每页大小

        sortProp: '',
        sortOrder: '',

        time: this.$route.query.active_time
          ? [
              new Date(Number(this.$route.query.active_time.split(',')[0])),
              new Date(Number(this.$route.query.active_time.split(',')[1])),
            ]
          : null,
      },
    };
  },
  computed: {
    ...mapGetters(['allAgent', 'config']),
  },
  created() {
    this.fetchData();
  },
  methods: {
    sortChange(e) {
      this.listQuery.sortProp = e.prop;
      if (e.order === 'ascending') {
        this.listQuery.sortOrder = 'asc';
      } else if (e.order === 'descending') {
        this.listQuery.sortOrder = 'desc';
      } else {
        this.listQuery.sortOrder = null;
      }
      this.fetchData();
    },
    async fetchData() {
      this.listLoading = true;
      const res = await getCardList({
        ...this.listQuery,
        activeTimeStart: this.listQuery.time && dayjs(this.listQuery.time[0]).format('YYYY-MM-DD HH:mm:ss'),
        activeTimeEnd: this.listQuery.time && dayjs(this.listQuery.time[1]).format('YYYY-MM-DD HH:mm:ss'),
      });
      this.total = res.data.total;
      this.list = res.data.list;
      setTimeout(() => {
        this.listLoading = false;
      }, 500);
    },
  },
};
</script>
<style scoped lang="scss">
.btn {
  // margin: 5px;
}

.filter-container {
  .filter-item {
    margin-bottom: 10px;
  }
}
</style>
